import React from 'react'
import './style.css'
export interface IProgressProps {
  step?: number;
  total?: number;
  showInfo?: boolean;
  color?: string;
  width?: number;
  barWidth?: number;
  prefixCls?: string;/*更好的对组件样式定制 */
}
const ProgressBar:React.FC<IProgressProps> = (props) => {
  const {
    prefixCls,
    barWidth,
    step,
    total,
    showInfo,
    color,
    ...restProps
  } = props
  let percent,
    text,
    progressInfo,
    progress;
  // 封装
  const percentDeal = (step: number | undefined, 
    total: number | undefined):number => {
      if (!step || !total) {
        return 0;
      }
    return (step/total) * 100;
  }
  const validProgress = (progress: number | undefined) => {
    if (!progress || progress < 0) {
      return 0;
    } else if (progress > 100) {
      return 100;
    }
    return progress;
  }
  const parseIntPercent = (text: number): string => `${Math.ceil(text)}%`;
  percent = percentDeal(step, total); 
  text = parseIntPercent(validProgress(percent));
  const fixTipsStyle = {
    left: text
  }
  if (showInfo) {
    progressInfo = (
      <div className={`${prefixCls}-show-info`}>
        <span className={`${prefixCls}-text`}>{text}</span>
      </div>
    )
  }
  const percentStyle = {
    width: text,
    height: "18px",
    fontSize:'12px',
    background: color,
    borderRadius: "100px"
  }
  const fixOuterStyle = {
    marginTop: "20px"
  }

  progress = (
    <div>
      <div className={`${prefixCls}-outer`} style={fixOuterStyle}>
        <div className={`${prefixCls}-inner`}>
          <div className={`${prefixCls}-bg`} style={percentStyle}>
            {progressInfo || null}
          </div>
        </div>
      </div>
    </div>
  )

  return (
    <div {...restProps} className="tiger-progress">
      {progress}
    </div>
  )
}

export default ProgressBar
